<template>
<el-affix :offset="139">
            <div class="sideNavLayer" @mouseleave="sideButLeave">
                <div class="navLayerOne">
                    <button class="navLayerOne-btn" @mouseenter="sideBut(0)" @click="toLine(49)" @mouseleave="sideButLeave">
                        <img src="https://admin.hqx.com.cn/Public/App/image/sideNavImg_1.png" alt=""> 亚洲
                    </button>
                    <div v-show="sideShow == 0" class="navLayerTwo" @mouseenter="sideBut(0)" @mouseleave="sideButLeave">
                        <ul class="navLayerTwo-ul">
                            <li v-for="rs in lineForeign['亚洲']" :key="rs.id">
                                <RouterLink :to="`/line/${rs.id}`">
                                    <span  class="post-re">
                                        {{ rs.title }}
                                        <span v-if="rs.hot" class="hot-tip iconfont icon-hot-tip"></span>
                                    </span>
                                </RouterLink>
                            </li>
                        </ul>
                        <!-- <div>聊天框小角标</div> -->
                    </div>
                </div>
                <div class="navLayerOne">
                    <button class="navLayerOne-btn" @mouseenter="sideBut(1)" @click="toLine(2)"  @mouseleave="sideButLeave">
                        <img src="https://admin.hqx.com.cn/Public/App/image/sideNavImg_2.png" alt=""> 欧洲
                    </button>
                    <div v-show="sideShow == 1" class="navLayerTwo" @mouseenter="sideBut(1)" @mouseleave="sideButLeave" style="width: 110px">
                        <ul class="navLayerTwo-ul">
                            <li v-for="rs in lineForeign['欧洲Two']" :key="rs.id">
                                <RouterLink :to="`/line/${rs.id}`"><span  class="post-re">
                                        {{ rs.title }}
                                        <span v-if="rs.hot" class="hot-tip iconfont icon-hot-tip"></span>
                                    </span></RouterLink>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="navLayerOne">
                    <button class="navLayerOne-btn" @mouseenter="sideBut(3)" @click="toLine(50)" @mouseleave="sideButLeave">
                        <img src="https://admin.hqx.com.cn/Public/App/image/sideNavImg_4.png" alt=""> 大洋洲
                    </button>
                    <div v-show="sideShow == 3" class="navLayerTwo" @mouseenter="sideBut(3)" @mouseleave="sideButLeave" style="width: 110px">
                        <ul class="navLayerTwo-ul">
                            <li v-for="rs in lineForeign['大洋洲']" :key="rs.id">
                                <RouterLink :to="`/line/${rs.id}`"><span  class="post-re">
                                        {{ rs.title }}
                                        <span v-if="rs.hot" class="hot-tip iconfont icon-hot-tip"></span>
                                    </span></RouterLink>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="navLayerOne">
                    <button class="navLayerOne-btn" @mouseenter="sideBut(4)" @click="toLine(7)" @mouseleave="sideButLeave">
                        <img src="https://admin.hqx.com.cn/Public/App/image/sideNavImg_5.png" alt=""> 美洲
                    </button>
                    <div v-show="sideShow == 4" class="navLayerTwo" @mouseenter="sideBut(4)" @mouseleave="sideButLeave" style="width: 110px">
                        <ul class="navLayerTwo-ul">
                            <li v-for="rs in lineForeign['美洲']" :key="rs.id">
                                <RouterLink :to="`/line/${rs.id}`"><span  class="post-re">
                                        {{ rs.title }}
                                        <span v-if="rs.hot" class="hot-tip iconfont icon-hot-tip"></span>
                                    </span></RouterLink>
                            </li>
                        </ul>
                    </div>
                </div> 
                <div class="navLayerOne">
                    <button class="navLayerOne-btn" @mouseenter="sideBut(5)" @click="toLine(91)" @mouseleave="sideButLeave">
                        <img src="https://admin.hqx.com.cn/Public/App/image/sideNavImg_6.png" alt=""> 海岛
                    </button>
                    <div v-show="sideShow == 5" class="navLayerTwo" @mouseenter="sideBut(5)" @mouseleave="sideButLeave" style="width: 110px">
                        <ul class="navLayerTwo-ul">
                            <li v-for="rs in lineForeign['海岛']" :key="rs.id">
                                <RouterLink :to="`/line/${rs.id}`"><span  class="post-re">
                                        {{ rs.title }}
                                        <span v-if="rs.hot" class="hot-tip iconfont icon-hot-tip"></span>
                                    </span></RouterLink>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="navLayerOne">
                    <button class="navLayerOne-btn" @mouseenter="sideBut(2)" @click="toLine(51)" @mouseleave="sideButLeave">
                        <img src="https://admin.hqx.com.cn/Public/App/image/sideNavImg_3.png" alt=""> 非洲
                    </button>
                    <div v-show="sideShow == 2" class="navLayerTwo" @mouseenter="sideBut(2)" @mouseleave="sideButLeave" style="width: 120px">
                        <ul class="navLayerTwo-ul">
                            <li v-for="rs in lineForeign['非洲']" :key="rs.id">
                                <RouterLink :to="`/line/${rs.id}`"><span  class="post-re">
                                        {{ rs.title }}
                                        <span v-if="rs.hot" class="hot-tip iconfont icon-hot-tip"></span>
                                    </span></RouterLink>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="navLayerOne">
                    <button class="navLayerOne-btn" @mouseenter="sideBut(6)" @click="toLine(79)" @mouseleave="sideButLeave">
                        <img src="https://admin.hqx.com.cn/Public/App/image/sideNavImg_7.png" alt=""> 西南
                    </button>
                    <div v-show="sideShow == 6" class="navLayerTwo" @mouseenter="sideBut(6)" @mouseleave="sideButLeave" style="width: 80px">
                        <ul class="navLayerTwo-ul">
                            <li v-for="rs in lineDomestic['西南']" :key="rs.id">
                                <RouterLink :to="`/line/${rs.id}`"><span  class="post-re">
                                        {{ rs.title }}
                                        <span v-if="rs.hot" class="hot-tip iconfont icon-hot-tip"></span>
                                    </span></RouterLink>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="navLayerOne">
                    <button class="navLayerOne-btn" @mouseenter="sideBut(7)" @click="toLine(80)" @mouseleave="sideButLeave">
                        <img src="https://admin.hqx.com.cn/Public/App/image/sideNavImg_8.png" alt=""> 西北
                    </button>
                    <div v-show="sideShow == 7" class="navLayerTwo" @mouseenter="sideBut(7)" @mouseleave="sideButLeave" style="width: 80px">
                        <ul class="navLayerTwo-ul">
                            <li v-for="rs in lineDomestic['西北']" :key="rs.id">
                                <RouterLink :to="`/line/${rs.id}`"><span  class="post-re">
                                        {{ rs.title }}
                                        <span v-if="rs.hot" class="hot-tip iconfont icon-hot-tip"></span>
                                    </span></RouterLink>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="navLayerOne">
                    <button class="navLayerOne-btn" @mouseenter="sideBut(8)" @click="toLine(194)" @mouseleave="sideButLeave">
                        <img src="https://admin.hqx.com.cn/Public/App/image/sideNavImg_9.png" alt=""> 华北
                    </button>
                    <div v-show="sideShow == 8" class="navLayerTwo" @mouseenter="sideBut(8)" @mouseleave="sideButLeave" style="width: 80px">
                        <ul class="navLayerTwo-ul">
                            <li v-for="rs in lineDomestic['华北']" :key="rs.id">
                                <RouterLink :to="`/line/${rs.id}`"><span  class="post-re">
                                        {{ rs.title }}
                                        <span v-if="rs.hot" class="hot-tip iconfont icon-hot-tip"></span>
                                    </span></RouterLink>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="navLayerOne">
                    <button class="navLayerOne-btn" @mouseenter="sideBut(9)" @click="toLine(75)" @mouseleave="sideButLeave">
                        <img src="https://admin.hqx.com.cn/Public/App/image/sideNavImg_10.png" alt=""> 华东
                    </button>
                    <div v-show="sideShow == 9" class="navLayerTwo" @mouseenter="sideBut(9)" @mouseleave="sideButLeave" style="width: 80px">
                        <ul class="navLayerTwo-ul">
                            <li v-for="rs in lineDomestic['华东']" :key="rs.id">
                                <RouterLink :to="`/line/${rs.id}`"><span  class="post-re">
                                        {{ rs.title }}
                                        <span v-if="rs.hot" class="hot-tip iconfont icon-hot-tip"></span>
                                    </span></RouterLink>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="navLayerOne">
                    <button class="navLayerOne-btn" @mouseenter="sideBut(10)" @click="toLine(76)" @mouseleave="sideButLeave">
                        <img src="https://admin.hqx.com.cn/Public/App/image/sideNavImg_11.png" alt=""> 华南
                    </button>
                    <div v-show="sideShow == 10" class="navLayerTwo" @mouseenter="sideBut(10)" @mouseleave="sideButLeave" style="width: 80px">
                        <ul class="navLayerTwo-ul">
                            <li v-for="rs in lineDomestic['华南']" :key="rs.id">
                                <RouterLink :to="`/line/${rs.id}`"><span  class="post-re">
                                        {{ rs.title }}
                                        <span v-if="rs.hot" class="hot-tip iconfont icon-hot-tip"></span>
                                    </span></RouterLink>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="navLayerOne">
                    <button class="navLayerOne-btn" @mouseenter="sideBut(11)" @click="toLine(78)" @mouseleave="sideButLeave">
                        <img src="https://admin.hqx.com.cn/Public/App/image/sideNavImg_12.png" alt=""> 华中
                    </button>
                    <div v-show="sideShow == 11" class="navLayerTwo" @mouseenter="sideBut(11)" @mouseleave="sideButLeave" style="width: 80px">
                        <ul class="navLayerTwo-ul">
                            <li v-for="rs in lineDomestic['华中']" :key="rs.id">
                                <RouterLink :to="`/line/${rs.id}`"><span  class="post-re">
                                        {{ rs.title }}
                                        <span v-if="rs.hot" class="hot-tip iconfont icon-hot-tip"></span>
                                    </span></RouterLink>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="navLayerOne">
                    <button class="navLayerOne-btn" @mouseenter="sideBut(12)" @click="toLine(81)" @mouseleave="sideButLeave">
                        <img src="https://admin.hqx.com.cn/Public/App/image/sideNavImg_13.png" alt=""> 东北
                    </button>
                    <div v-show="sideShow == 12" class="navLayerTwo" @mouseenter="sideBut(12)" @mouseleave="sideButLeave" style="width: 90px">
                        <ul class="navLayerTwo-ul">
                            <li v-for="rs in lineDomestic['东北']" :key="rs.id">
                                <RouterLink :to="`/line/${rs.id}`"><span  class="post-re">
                                        {{ rs.title }}
                                        <span v-if="rs.hot" class="hot-tip iconfont icon-hot-tip"></span>
                                    </span></RouterLink>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            
        </el-affix>
</template>


<script setup>
import { area_details, line_items, area_Destination, theme_itemsByArea, connect_items } from "@/api/travel";
import { ref, reactive, onBeforeMount, onMounted, computed, onUpdated, watch } from "vue";
import { useRoute,useRouter, RouterLink } from 'vue-router';
// 字典
import lineForeign from '@/assets/dictionaries/lineAreasForeign.js';
import lineDomestic from '@/assets/dictionaries/lineAreasDomestic.js';
const route = useRoute();
const router = useRouter();
let sideShow = ref(-1);
const sideBut = (index)=>{
    sideShow.value = index;
}
const sideButLeave = ()=>{
    sideShow.value = -1;
}

// 跳转line页面
const toLine = (id) => {
  router.push(`/line/${id}`)
}
</script>

<style lang="scss" scoped>
.sideNavLayer {
  position: absolute;
  width: 150px;
  background-color: #fff;
  padding: 10px 0;
  height: 100vh;
  box-sizing: border-box;
}
.navLayerOne {
  position: relative;
  display: flex;
  justify-content: center;
  width: 150px;
//   margin-bottom: 6px;
  min-height: 42px;
  box-sizing: border-box;
}
.navLayerOne-btn {
  width: 120px;
  display: flex;
  align-items: center;
  white-space: nowrap;
  padding: 10px 13px;
  border-radius: 20px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: PingFang SC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: #333333;
}
.navLayerOne-btn:hover {
  background: #ecf5ff;
}
.navLayerOne-btn > img {
  width: 16px;
  height: 16px;
  margin-right: 9px;
}

.navLayerTwo {
  position: absolute;
  top: 0px;
  left: 120px;
  width: 136px;
  padding-left: 20px;
  z-index: 1000;
}
.navLayerTwo-ul {
  padding: 10px 20px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0px 0px 20px 0px rgba(0, 22, 53, 0.05);
  box-sizing: border-box;
}
.navLayerTwo-ul > li > a {
  display: block;
  font-size: 14px;
  line-height: 28px;
  color: #666;
}
.navLayerTwo-ul > li > a:hover {
  color: #0086f6;
}
.hot-tip{
    position: absolute;
    top: -8px;
    right: -22px;
    color: #f81580;
}
</style>

